/* hook组件 useMemo */
import React, {useState,useMemo} from 'react'
import {Button} from 'antd'

/*
*  useMemo 具备缓存的数据，"计算缓存"
*  在依赖的状态值没有发生改变，callback没有触发执行的时候，xxx获取的是上一次计算出来的结果
*  和vue中的计算属性非常的类似！
*  优化一些不必要的操作，提高组件的更新的速度
* */
const Demo = function () {
    let [supNum, setSupNum] = useState(15),
        [oppNum, setOppNum] = useState(5),
        [x, setX] = useState(0)

    // 经过计算，得出支持比率 -- 这样会导致每次都执行
    // let total = supNum + oppNum,
    //     ratio = '---'
    // if (total > 0) ratio = (supNum / total * 100).toFixed(2) + '%'
    // console.log(111)

    /*
    *  需求: 在函数每一次重新执行的时候，如果依赖的状态值没有发生变化，我们此操作逻辑不应该去执行!
    *       只有依赖值发生改变，我们再去执行即可! !
    * */

    let ratio = useMemo(() => {
        let total = supNum + oppNum,
            ratio = '---'
        if (total > 0) ratio = (supNum / total * 100).toFixed(2) + '%'
        console.log(111)
    }, [supNum, oppNum])

    return <div className="vote-box">
        <div className="main">
            <p>支持人数：{supNum}人</p>
            <p>反对人数：{oppNum}人</p>
            <p>支持比例：{ratio}</p>
            <p>x:{x}</p>
        </div>
        <div className="footer">
            <Button type='primary' onClick={() => setSupNum(supNum + 1)}>支持</Button>
            <Button type='primary' danger onClick={() => setOppNum(oppNum + 1)}>反对</Button>
            <Button onClick={() => setX(x + 1)}>干点别的事</Button>
        </div>
    </div>
}

export default Demo